<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
  <!-- Layui -->
  <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css" />

  <title>登录</title>
  <style type="text/css">

    form {
      padding-top: 5%;
    }
    small {
      color: #00a0e9;
    }
    #kanbuq {
      color: #00b7ee;
    }
    /* 修改验证表单异常时提示颜色 */
    .layui-layer-tips .layui-layer-content {
      background-color: rgb(80, 80, 80) !important;
      color: #30ff00 !important;
    }
    .layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT {
      border-right-color: rgb(80, 80, 80)!important;
    }
  </style>

</head>
<body class="layui-layout-body layui-bg-gray">

  <div class="layui-container">

    <div class="layui-row">
      <!--left-->
      <div class="layui-col-xs2 layui-col-sm3 layui-col-md3">
        <!--<hr class="layui-bg-black">-->
        <br/>
      </div>

      <!--middle-->
      <div class="layui-col-xs8 layui-col-sm6 layui-col-md6" style="padding-top: 10%;">

        <fieldset class="layui-elem-field layui-field-title">
          <legend><b class="">后台管理系统</b> - <small class="">精彩有您</small></legend>
          <div class="layui-field-box">

            <form class="layui-form" action="">
              <div class="layui-form-item">
                <label class="layui-form-label">用户账号</label>
                <div class="layui-input-block">
                  <input type="text" name="username" required  lay-verify="required" lay-verType="tips" placeholder="请输入登录账号" autocomplete="off" class="layui-input" style="width: 80%;">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">用户密码</label>
                <div class="layui-input-block">
                  <input type="password" name="password" required lay-verify="required|password" lay-verType="tips" placeholder="请输入登录密码" autocomplete="off" class="layui-input" style="width: 80%;">
                </div>
              </div>
              <div class="layui-form-item" style=";height: 38px;">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline" style="width: 150px">
                  <input type="text" name="verifyCode" required lay-verify="required" lay-verType="tips" placeholder="验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width: 120px">
                  <img src="data:image/png;base64," id="verifyCodeImg" onclick="getVerifyCode()" height="38px"/>
                </div>
                <div class="layui-form-mid layui-word-aux"><a id="kanbuq" href="javascript:getVerifyCode();">换一张</a></div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                  <input type="checkbox" name="rememberme" id="rememberme" lay-skin="primary" title="记住我"/>
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="login">登录</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>

          </div>
        </fieldset>



      </div>

      <!--right-->
      <div class="layui-col-xs2 layui-col-sm3 layui-col-md3">
        <!--<hr class="layui-bg-blue">-->
        <br/>

      </div>
    </div>

  </div>

  <script type="text/javascript" color="36, 88, 17" opacity='0.3' zIndex="-2" count="299" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
  <script type="text/javascript" src="lib/jquery/3.3.0/jquery.min.js"></script>
  <script type="text/javascript" src="lib/jquery/3.3.0/jquery.cookie-1.4.1.min.js"></script>
  <script type="text/javascript" src="lib/layui/layui.js"></script>
  <script type="text/javascript" src="libme/script/ani.js"></script>
  <script type="text/javascript" src="libme/pages/login.js"></script>
  <script type="text/javascript">
      //config的设置是全局的
      layui.config({
          base: './libme/modules/' //假设这是你存放拓展模块的根目录
      }).extend({ //设定模块别名
          api: 'api' //如果 mymod.js 是在根目录，也可以不用设定别名
          //,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
      });


  </script>
</body>
</html>
